<template>
    <div class="bigbox">
        <div class="bg1"></div>
        <div class="bg2"></div>
        <div class="bg3"></div>
        <div class="swiperbox">
            <div class="swiper-container" id="myswiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../../assets/img/swiper1.png" alt="" class="bannerimg">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../assets/img/swiper1.png" alt="" class="bannerimg">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../assets/img/swiper1.png" alt="" class="bannerimg">
                    </div>
                </div>
            </div>
        </div>

        <div class="bigjsbox">
            <div class="jsbox">
                <p class="jstitle">
                    企业发展理念
                    <span>引之·赢之·盈之</span>
                </p>
                <div class="txtbox">
                    引之影视的目标，即用与电影发展同样的方式，以严谨、精准的客户服务，通过与投资方和精良的制作团队的默契配合，致力为更多的人群带来更多优秀的电影作品，让人人都能够感受到电影的魅力。
                </div>
                <div class="jsitembox">
                    <div class="item">
                        <img src="../../assets/img/jsimg1.png" alt="">
                        <p>项目策划</p>
                        <p>完善的影视方案</p>
                        <p>对现有资源进行优化整合</p>
                    </div>
                    <div class="item">
                        <img src="../../assets/img/jsimg2.png" alt="">
                        <p>电影发行</p>
                        <p>影片制作前的市场调查</p>
                        <p>通过调查来决定是否值得出品该影片</p>
                    </div>
                    <div class="item">
                        <img src="../../assets/img/jsimg3.png" alt="">
                        <p>电影宣发</p>
                        <p>通过专业渠道</p>
                        <p>实施所出品电影的前期预热和积攒口碑</p>
                    </div>
                </div>
            </div>
        </div>




        <div class="ysxmbox">
            <div class="ysxm">
                <div class="ysxmtitle">
                    <img src="../../assets/img/titleicon1.png" alt="">
                    <span>影视项目</span>
                    <img src="../../assets/img/titleicon1.png" alt="">
                </div>
                <div class="ysxmitembox">
                    <div class="ysxmitem">
                        <img src="../../assets/img/movie1.png" alt="" class="ysxmitemimg">
                        <div class="ysxmitemtxt">
                            <p>送你一朵小红花</p>
                            <span>演员阵容：易烊千玺、刘浩存、朱媛媛、高亚麟asssssss</span>
                            <span>电影类型： 院线电影项目</span>
                            <span>上映状态： 待上映</span>
                            <span class="ysxmitemtxtlast">简介：对整洁和计划有着超乎常人执念的鲍抱（常远 饰），本以为自己是一个友情爱情的绝缘体，但在遇到个性率真宋温暖（李沁 饰） 、妙手“神经”贾医生（沈腾 饰）</span>
                        </div>
                    </div>
                    <div class="ysxmitem">
                        <img src="../../assets/img/movie1.png" alt="" class="ysxmitemimg">
                        <div class="ysxmitemtxt">
                            <p>送你一朵小红花</p>
                            <span>演员阵容：易烊千玺、刘浩存、朱媛媛、高亚麟asssssss</span>
                            <span>电影类型： 院线电影项目</span>
                            <span>上映状态： 待上映</span>
                            <span class="ysxmitemtxtlast">简介：对整洁和计划有着超乎常人执念的鲍抱（常远 饰），本以为自己是一个友情爱情的绝缘体，但在遇到个性率真宋温暖（李沁 饰） 、妙手“神经”贾医生（沈腾 饰）</span>
                        </div>
                    </div>
                    <div class="ysxmitem">
                        <img src="../../assets/img/movie1.png" alt="" class="ysxmitemimg">
                        <div class="ysxmitemtxt">
                            <p>送你一朵小红花</p>
                            <span>演员阵容：易烊千玺、刘浩存、朱媛媛、高亚麟asssssss</span>
                            <span>电影类型： 院线电影项目</span>
                            <span>上映状态： 待上映</span>
                            <span class="ysxmitemtxtlast">简介：对整洁和计划有着超乎常人执念的鲍抱（常远 饰），本以为自己是一个友情爱情的绝缘体，但在遇到个性率真宋温暖（李沁 饰） 、妙手“神经”贾医生（沈腾 饰）</span>
                        </div>
                    </div>
                    <div class="ysxmitem">
                        <img src="../../assets/img/movie1.png" alt="" class="ysxmitemimg">
                        <div class="ysxmitemtxt">
                            <p>送你一朵小红花</p>
                            <span>演员阵容：易烊千玺、刘浩存、朱媛媛、高亚麟asssssss</span>
                            <span>电影类型： 院线电影项目</span>
                            <span>上映状态： 待上映</span>
                            <span class="ysxmitemtxtlast">简介：对整洁和计划有着超乎常人执念的鲍抱（常远 饰），本以为自己是一个友情爱情的绝缘体，但在遇到个性率真宋温暖（李沁 饰） 、妙手“神经”贾医生（沈腾 饰）</span>
                        </div>
                    </div>
                    <div class="ysxmitem">
                        <img src="../../assets/img/movie1.png" alt="" class="ysxmitemimg">
                        <div class="ysxmitemtxt">
                            <p>送你一朵小红花</p>
                            <span>演员阵容：易烊千玺、刘浩存、朱媛媛、高亚麟asssssss</span>
                            <span>电影类型： 院线电影项目</span>
                            <span>上映状态： 待上映</span>
                            <span class="ysxmitemtxtlast">简介：对整洁和计划有着超乎常人执念的鲍抱（常远 饰），本以为自己是一个友情爱情的绝缘体，但在遇到个性率真宋温暖（李沁 饰） 、妙手“神经”贾医生（沈腾 饰）</span>
                        </div>
                    </div>
                    <div class="ysxmitem">
                        <img src="../../assets/img/movie1.png" alt="" class="ysxmitemimg">
                        <div class="ysxmitemtxt">
                            <p>送你一朵小红花</p>
                            <span>演员阵容：易烊千玺、刘浩存、朱媛媛、高亚麟asssssss</span>
                            <span>电影类型： 院线电影项目</span>
                            <span>上映状态： 待上映</span>
                            <span class="ysxmitemtxtlast">简介：对整洁和计划有着超乎常人执念的鲍抱（常远 饰），本以为自己是一个友情爱情的绝缘体，但在遇到个性率真宋温暖（李沁 饰） 、妙手“神经”贾医生（沈腾 饰）</span>
                        </div>
                    </div>
                </div>


                <div class="moremovie">
                    查看更多
                </div>

            </div>
        </div>





        <div class="yszxbox">
            <div class="yszxbg"></div>
            <div class="yszx">
                <div class="yszxtitle">
                    <img src="../../assets/img/titleicon2.png" alt="">
                    <span>影视资讯</span>
                    <img src="../../assets/img/titleicon2.png" alt="">
                </div>
                <div class="yszxitembox">
                    <div class="yszxitemboxleft">
                        <div class="yszxitemboxleftitem">
                            <img src="../../assets/img/banner1.png" alt="" class="yszxitemboxleftimg">
                            <div class="yszxitemboxlefttxt">
                                1
                            </div>
                        </div>
                                
                                
                    </div>
                    <div class="yszxitemboxright">
                        <div class="yszxitemboxtop">
                            <img src="../../assets/img/banner1.png" alt="">
                            <div class="yszxitemboxtoptxt">
                                <p class="yszxitemboxtoptitle">中国电影导演协会初评入围名单出炉，你怎么看？中国电影导演协会初评入围名单出炉，你怎么看？</p>
                                <p class="yszxitemboxtoptime"> <span>时间：2020-07-03</span> <span>来源：小引</span> </p>
                                <div class="yszxitemboxtopcontent">
                                    1月23日，武汉市新型肺炎防控指挥部正式发出指令，无特殊原因，市民不要离开武汉。1月23日，武汉市新型肺炎防控指挥部正式发出指令，无特殊原因，市民不要离开武汉。
                                </div>
                            </div>
                        </div>

                        <div class="yszxitemboxrightitme">
                            <div class="yszxitems"> <span></span> <p>引之电影人物丨64岁再执导电影，配角引之电影人物丨64岁再执导电影，配角</p> <img src="../../assets/img/hot.png" ></div>
                            <div class="yszxitems"> <span></span> <p>引之电影人物丨64岁再执导电影，配角引之电影人物丨64岁再执导电影，配角</p> <img src="../../assets/img/hot.png" ></div>
                            <div class="yszxitems"> <span></span> <p>引之电影人物丨64岁再执导电影，配角引之电影人物丨64岁再执导电影，配角</p> <img src="../../assets/img/hot.png" ></div>
                            <div class="yszxitems"> <span></span> <p>引之电影人物丨64岁再执导电影，配角引之电影人物丨64岁再执导电影，配角</p> <img src="../../assets/img/hot.png" ></div>
                            <div class="yszxitems"> <span></span> <p>引之电影人物丨64岁再执导电影，配角引之电影人物丨64岁再执导电影，配角</p> <img src="../../assets/img/hot.png" ></div>
                            <div class="yszxitems"> <span></span> <p>引之电影人物丨64岁再执导电影，配角引之电影人物丨64岁再执导电影，配角</p> <img src="../../assets/img/hot.png" ></div>
                        </div>

                        

                    </div>
                </div>

                <div class="morezixun">
                    更多资讯
                </div>
            </div>
        </div>


       <div class="cglcbox">
            <div class="cglc">
                <div class="cglctitle">
                    <img src="../../assets/img/titleicon1.png" alt="">
                    <span>参股流程</span>
                    <img src="../../assets/img/titleicon1.png" alt="">
                </div>

                <img src="../../assets/img/rglc.png" alt="" class="rglcimg">


            </div>
       </div>



       <div class="hzhbbox">
            <div class="hzhb">
                <div class="hzhbtitle">
                    <img src="../../assets/img/titleicon1.png" alt="">
                    <span>合作伙伴</span>
                    <img src="../../assets/img/titleicon1.png" alt="">
                </div>
                <div class="hzhbitembox">
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                    <div class="hzhbitem">
                        <img src="../../assets/img/hbimg1.png" alt="">
                    </div>
                </div>
            </div>
        </div>




        <div class="cgdybox">
            <div class="cgdy">
                <div class="cgdytitle">
                    <img src="../../assets/img/titleicon1.png" alt="">
                    <span>参股答疑</span>
                    <img src="../../assets/img/titleicon1.png" alt="">
                </div>

                

                <div class="cgdyitembox">
                    <div class="cgdyitem">
                        <div class="wen">
                            <img src="../../assets/img/wen.png" alt="">
                            <p>什么是联合出品人？</p>
                        </div>
                        <div class="da">
                            <img src="../../assets/img/da.png" alt="">
                            <p>制作电影的影视公司叫出品方，投资电影的影视公司叫联合出品方，而我们个人投资者参与之后就是联合出品人。</p>
                        </div>
                    </div>
                    <div class="cgdyitem">
                        <div class="wen">
                            <img src="../../assets/img/wen.png" alt="">
                            <p>影视公司不缺钱，为什么还要注资？</p>
                        </div>
                        <div class="da">
                            <img src="../../assets/img/da.png" alt="">
                            <p>一般来说，电影出品公司一年要拍好几部电影，需要更快回笼资金，投入拍摄下一部影片。所以出品公司会出让小部分份额出来，交给第三方平台集资，目的也是为了宣传影片。</p>
                        </div>
                    </div>
                    <div class="cgdyitem">
                        <div class="wen">
                            <img src="../../assets/img/wen.png" alt="">
                            <p>影视投资的正规流程是什么？</p>
                        </div>
                        <div class="da">
                            <img src="../../assets/img/da.png" alt="">
                            <p>第一步，了解项目；第二步，签订书面合同，确定份额；第三步，向影视公司支付投资款；第四步，电影制作；第五步，院线上线；第六步，根据统计的票房收入等收益确定分红比例并进行分红。</p>
                        </div>
                    </div>
                    <div class="cgdyitem">
                        <div class="wen">
                            <img src="../../assets/img/wen.png" alt="">
                            <p>签订书面合同时的有哪些注意事项？</p>
                        </div>
                        <div class="da">
                            <img src="../../assets/img/da.png" alt="">
                            <p>对投资主体、投资方式、投资份额、版权、收益分配，以及投资失败后的合同解除和违约责任等有明确的约定，尤其是对于收益分配问题，必须约定明确收益分配的具体时间或者具体条件、上家逾期结算的违约责任、投资人可以采取的救济措施等。</p>
                        </div>
                    </div>
                    <div class="cgdyitem">
                        <div class="wen">
                            <img src="../../assets/img/wen.png" alt="">
                            <p>签订书面合同时的有哪些注意事项？</p>
                        </div>
                        <div class="da">
                            <img src="../../assets/img/da.png" alt="">
                            <p>对投资主体、投资方式、投资份额、版权、收益分配，以及投资失败后的合同解除和违约责任等有明确的约定，尤其是对于收益分配问题，必须约定明确收益分配的具体时间或者具体条件、上家逾期结算的违约责任、投资人可以采取的救济措施等。</p>
                        </div>
                    </div>
                    <div class="cgdyitem">
                        <div class="wen">
                            <img src="../../assets/img/wen.png" alt="">
                            <p>签订书面合同时的有哪些注意事项？</p>
                        </div>
                        <div class="da">
                            <img src="../../assets/img/da.png" alt="">
                            <p>对投资主体、投资方式、投资份额、版权、收益分配，以及投资失败后的合同解除和违约责任等有明确的约定，尤其是对于收益分配问题，必须约定明确收益分配的具体时间或者具体条件、上家逾期结算的违约责任、投资人可以采取的救济措施等。</p>
                        </div>
                    </div>
                </div>


            </div>
       </div>




    </div>
</template>


<script>
export default {
    data(){
        return {
            t : 0,
        }
    },
    methods:{
        windowscroll(){
            this.t = document.documentElement.scrollTop || document.body.scrollTop;
            var headerbox = document.getElementsByClassName("headerbox")[0];
            if(this.t > 0){
                headerbox.classList.add("headermask")
            }else{
                headerbox.classList.remove("headermask")
            }
        }
    },
    mounted () {
        this.t = document.documentElement.scrollTop || document.body.scrollTop;
        window.addEventListener('scroll',this.windowscroll)



        new Swiper ('#myswiper2', {
            touchMoveStopPropagation:true,
            autoplay: 3500,
            speed: 800,
            watchSlidesProgress : true,  //查看slide的progress
            resistanceRatio : 0, //禁止边缘移动
            observer : true,//修改swiper自己或子元素时，自动初始化swiper    
            observeParents : true,//修改swiper的父元素时，自动初始化swiper
            loop:true,
            loopAdditionalSlides : 2,
            pagination :'#swiper-pagination1',
        }) 

    },
    beforeDestroy (){
        window.removeEventListener('scroll',this.windowscroll)
    }
}
</script>


<style lang="scss" scoped>
.bigbox{
    width: 100%;
    margin-bottom: 534px;
    position: relative;
    z-index: 1;
    background-color: #fff;
    .bg1{
        width: 100%;
        height: 849px;
        background: url(../../assets/img/indexbg1.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: -6;
    }
    .bg2{
        width: 100%;
        height: 2047px;
        background: url(../../assets/img/indexbg2.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 1481px;
        z-index: -6;
    }
    .bg3{
        width: 100%;
        height: 1819px;
        background: url(../../assets/img/indexbg3.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 1524px;
        z-index: -7;
    }
    .swiperbox{
        width: 100%;
        height: 369px;
        .swiper-container{
            width: 100%;
            height: 100%;
            .swiper-wrapper{
                width: 100%;
                height: 100%;
                .swiper-slide{
                    width: 100%;
                    height: 100%;
                    img{
                        width: 100%;
                        height: 100%;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .bigjsbox{
        width: 100%;
        height: 480px;
        margin-bottom: 40px;
        .jsbox{
            width: 1214px;
            height: 100%;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            .jstitle{
                height: 46px;
                color: #343434;
                font-weight: bold;
                font-size: 35px;
                line-height: 46px;
                margin-top: 75px;
                margin-bottom: 19px;
                span{
                    font-size: 28px;
                    line-height: 32px;
                    margin-left: 28px;
                }
            }
            .txtbox{
                width: 100%;
                height: 57px;
                overflow: hidden;
                font-size: 19px;
                font-weight: 400;
                line-height: 32px;
                color: #595C6A;
                margin-bottom: 64px;
            }
            .jsitembox{
                width: 100%;
                display: flex;
                .item{
                    flex: 1;
                    text-align: center;
                    font-size: 19px;
                    color: #595C6A;
                    img{
                        display: block;
                        width: 80px;
                        height: 80px;
                        margin: 0 auto 5px;
                    }
                    p:nth-of-type(1){
                        font-weight: bold;
                        line-height: 32px;
                        margin-bottom: 12px;
                    }
                    p:nth-of-type(2){
                        font-weight: 400;
                        line-height: 32px;
                    }
                    p:nth-of-type(3){
                        font-weight: 400;
                        line-height: 32px;
                    }
                }
            }
        }
        
    }





        
    .ysxmbox{
        width: 100%;
    }
    .ysxm{
        width: 1214px;
        height: 100%;
        margin: 0 auto;
    }
    .ysxmtitle{
        width: 446px;
        height: 105px;
        font-size: 36px;
        font-weight: bold;
        line-height: 105px;
        color: #343434;
        margin: 0 auto;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url(../../assets/img/1icon.png) no-repeat;
        background-size: 32px 75px;
        background-position-x: 49%;
    }
    .ysxmtitle img{
        width: 108px;
        height: 24px;
        display: inline-block;
    }
    .ysxmitembox{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .ysxmitem{
        width: 384px;
        height: 450px;
        margin-bottom: 46px;
        background-color: #fff;
        box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.09);
        overflow: hidden;
        position: relative;
        z-index: 1;
        cursor: pointer;
    }
    .ysxmitem img{
        width: 100%;
        height: 248px;
        transition: all .4s ease;
    }
    .ysxmitem .ysxmitemtxt{
        width: 100%;
        height: 202px;
        padding-top: 13px;
        background-color: #fff;
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        transition: all .4s ease;
    }
    .ysxmitem .ysxmitemtxt p{
        width: 100%;
        font-size: 22px;
        font-weight: 400;
        line-height: 32px;
        color: #444B54;
        text-align: center;
        margin-bottom: 24px;
        transition: all .4s ease;
    }
    .ysxmitem .ysxmitemtxt span{
        width: 334px;
        font-size: 16px;
        font-weight: 400;
        line-height: 32px;
        color: #444B54;
        display: block;
        margin: 0 auto;
        transition: all .4s ease;
    }
    .ysxmitem .ysxmitemtxt span:first-of-type{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ysxmitem .ysxmitemtxt .ysxmitemtxtlast{
        visibility: hidden;
    }
    .ysxmitem:hover .ysxmitemtxt{
        height: 301px;
        background: #444B54;
        transition: all .4s ease;
    }
    .ysxmitem:hover .ysxmitemtxtlast{
        visibility: visible;
        transition: all .4s ease;
    }
    .ysxmitem:hover .ysxmitemtxt span{
        color: #fff;
        transition: all .4s ease;
    }
    .ysxmitem:hover .ysxmitemtxt p{
        color: #fff;
        transition: all .4s ease;
    }
    .ysxmitem:hover .ysxmitemimg{
        transform: scale(1.2);
        transition: all .4s ease;
    }
    .moremovie{
        display: block;
        width: 121px;
        height: 41px;
        border: 1px solid #BC825B;
        box-sizing: border-box;
        margin: 0 auto 70px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 41px;
        color: #BC825B;
        text-align: center;
        cursor: pointer;
    }
    .moremovie:hover{
        border: 1px solid  rgba(238, 175, 96, 1) !important;
        color: rgba(238, 175, 96, 1) !important;
    }


        
    .yszxbox{
        width: 100%;
        height: 542px;
        overflow: hidden;
        position: relative;
    }
    .yszxbg{
        background: #FCF5F0;
        position: absolute;
        width: 100%;
        height: 542px;
        top: 0;
        z-index: -7;
    }
    .yszx{
        width: 1214px;
        height: 542px;
        margin: 0 auto;
        overflow: hidden;
    }
    .yszxtitle{
        width: 446px;
        height: 105px;
        font-size: 36px;
        font-weight: bold;
        line-height: 105px;
        color: rgba(238, 175, 96, 1);
        margin: 20px auto 0;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url(../../assets/img/2icon.png) no-repeat;
        background-size: 49px 75px;
        background-position-x: 50%;
        background-position-y: 35%;
    }
    .yszxtitle img{
        width: 108px;
        height: 24px;
        display: inline-block;
    }
    .yszxitembox{
        width: 100%;
        height: 290px;
        display: flex;
        margin-bottom: 44px;
    }
    .yszxitemboxleft{
        display: block;
        width: 507px;
        height: 290px;
        position: relative;
        margin-right: 19px;
        cursor: pointer;
        overflow: hidden;
    }
    .yszxitemboxleftitem{
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    .yszxitemboxleft .yszxitemboxleftimg{
        width: 100%;
        height: 100%;
        transition: all .2s ease;
    }
    .yszxitemboxlefttxt{
        width: 100%;
        height: 44px;
        position: absolute;
        bottom: 0;
        background-color: rgba(0,0,0,.41);
        font-size: 19px;
        font-weight: 400;
        line-height: 44px;
        color: #F2F2F2;
        white-space: nowrap;
        padding: 0 16px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .yszxitemboxleft:hover .yszxitemboxlefttxt{
        color: #dddddd !important;
        transition: all .2s ease;
    }
    .yszxitemboxleft:hover .yszxitemboxleftimg{
        //transform: scale(1.1) !important;
        transition: all .2s ease;
    }
    .yszxitemboxright{
        width: 687px;
        height: 100%;
    }
    .yszxitemboxtop{
        display: block;
        width: 100%;
        height: 129px;
        border: 1px solid #E9E9E9;
        cursor: pointer;
        display: flex;
        padding-bottom: 19px;
    }
    .yszxitemboxtop img{
        width: 232px;
        height: 127px;
    }
    .yszxitemboxtoptxt{
        width: 427px;
        height: 100%;
        margin-left: 10px;
        overflow: hidden;
    }
    .yszxitemboxtoptxt .yszxitemboxtoptitle{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 18px;
        font-weight: bold;
        line-height: 20px;
        color: #080808;
        margin-top: 8px;
        margin-bottom: 10px;
    }
    .yszxitemboxtoptime{
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #ADADAD;
        margin-bottom: 10px;
    }
    .yszxitemboxtoptime span{
        margin-right: 24px;
    }
    .yszxitemboxtopcontent{
        width: 100%;
        height: 47px;
        font-size: 16px;
        font-weight: 400;
        line-height: 25px;
        color: #6D6A72;
        display: -webkit-box;    
        -webkit-box-orient: vertical;    
        -webkit-line-clamp: 2;    
        overflow: hidden;
        text-indent: 20px;
    }
    .yszxitemboxtop:hover{
        border: 1px solid #dddddd !important;
    }
    .yszxitemboxtop:hover .yszxitemboxtoptitle{
        color: #BC825B !important;
    }
    .yszxitemboxrightitme{
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .yszxitems{
        display: block;
        width: 50%;
        float: left;
        font-size: 14px;
        font-weight: 400;
        line-height: 47px;
        color: #080808;
        position: relative;
        text-indent: 15px;
        border-bottom: 1px dotted #CDCDCD;
        cursor: pointer;
    }
    .yszxitems p{
        width: 280px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .yszxitems img{
        width: 22px;
        height: 15px;
        position: absolute;
        top: 10px;
        left: 265px;
    }
    .yszxitems span{
        display: inline-block;
        width: 5px;
        height: 5px;
        background: #080808;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    .yszxitems:hover{
        color: #BC825B !important;
    }
    .morezixun{
        display: block;
        width: 121px;
        height: 41px;
        border: 1px solid #BC825B;
        box-sizing: border-box;
        margin: 0 auto 37px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 41px;
        color: #BC825B;
        text-align: center;
        cursor: pointer;
    }
    .morezixun:hover{
        border: 1px solid  rgba(238, 175, 96, 1) !important;
        color:  rgba(238, 175, 96, 1) !important;
    }

    




        
    .cglcbox{
        width: 100%;
        height: 722px;
        overflow: hidden;
    }
    .cglc{
        width: 1214px;
        height: 722px;
        margin: 0 auto;
        overflow: hidden;
    }
    .cglctitle{
        width: 446px;
        height: 105px;
        font-size: 36px;
        font-weight: bold;
        line-height: 105px;
        color: #343434;
        margin: 55px auto 0;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url(../../assets/img/3icon.png) no-repeat;
        background-size: 49px 80px;
        background-position-x: 50%;
        background-position-y: 24%;
    }
    .cglctitle img{
        width: 108px;
        height: 24px;
        display: inline-block;
    }
    .rglcimg{
        width: 100%;
        height: 490px;
    }



        
    .hzhbbox{
        width: 100%;
        height: 560px;
        overflow: hidden;
    }
    .hzhb{
        width: 1214px;
        height: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    .hzhbtitle{
        width: 446px;
        height: 105px;
        font-size: 36px;
        font-weight: bold;
        line-height: 105px;
        color: #343434;
        margin: 35px auto 20px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url(../../assets/img/4icon.png) no-repeat;
        background-size: 61px 67px;
        background-position-x: 50%;
        background-position-y: 24%;
    }
    .hzhbtitle img{
        width: 108px;
        height: 24px;
        display: inline-block;
    }
    .hzhbitembox{
        width: 1120px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .hzhbitem{
        width: 216px;
        height: 105px;
        margin-bottom: 10px;
        background-color: #fff;
        cursor: pointer;
        overflow: hidden;
        box-shadow: 0 2px 7px 0 rgba(185, 185, 185, 0.15);
    }
    .hzhbitem img{
        width: 100%;
        height: 100%;
        transition: all .3s ease;
    }
    .hzhbitem:hover img{
        transform: scale(1.1);
        transition: all .3s ease;
    }



    .cgdybox{
        width: 100%;
        height: 800px;
        overflow: hidden;
        .cgdy{
            width: 1214px;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
            .cgdytitle{
                width: 446px;
                height: 105px;
                font-size: 36px;
                font-weight: bold;
                line-height: 105px;
                color: #343434;
                margin: 25px auto 25px;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: url(../../assets/img/5icon.png) no-repeat;
                background-size: 61px 66px;
                background-position-x: 50%;
                background-position-y: 24%;
                img{
                    width: 108px;
                    height: 24px;
                    display: inline-block;
                }
            }
            
            .cgdyitembox{
                width: 100%;
                height: 500px;
                overflow: auto;
                padding: 10px 65px 10px;
                box-sizing: border-box;
                font-size: 18px;
                font-weight: 400;
                line-height: 32px;
                color: #343434;
            }
            .cgdyitembox::-webkit-scrollbar {
                width: 10px;
                height: 1px;
            }
            .cgdyitembox::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: #a0a0a0;
            }
            .cgdyitembox::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                border-radius: 10px;
                background: #EDEDED;
            }
            /* .cgdyitembox::-webkit-scrollbar {
                display: none;
            } */
            .cgdyitem{
                margin-bottom: 30px;
            }
            .cgdyitem .wen{
                display: flex;
                margin-bottom: 10px;
            }
            .cgdyitem .wen img{
                display: block;
                width: 32px;
                height: 32px;
                margin-right: 16px;
            }
            .cgdyitem .da{
                display: flex;
                margin-bottom: 10px;
            }
            .cgdyitem .da img{
                display: block;
                width: 32px;
                height: 32px;
                margin-right: 16px;
            }
        }
    }

}
</style>